<template>
    <div>
        <div class="title_box">
          <div class="iconfont icon-left" @click="$router.go(-1)"></div>
          <div class="title">我的足迹</div>
          <div @click="showPopup">编辑</div>
        </div>

        <div class="list" v-if="footprintList.length > 0">
            <ul>
                <li v-for="(item,index) in footprintList" :key="index" @click="goDetail(item.goods_id)">
                    <img :src="item.goods_small_logo" alt="">
                    <div class="price">￥{{item.goods_price}}</div>
                    <div class="del" v-if="delBtn" @click.stop="delSingle(index)">x</div>
                </li>
            </ul>
        </div>

        <div class="default" v-else>啥都没有~</div>

        <van-popup
          v-model="show"
          position="bottom"
          :overlay="false"
          >
          <div class="btn">
                <div class="allDel" @click="allDel">清空足迹</div>
          </div>
        </van-popup>
    </div>
</template>

<script>
import axios from "axios"
export default {
    data() {
        return {
            footprintList:[],
            show: false,
            delBtn: false
        }
    },
    methods:{
        api(){
            return "https://api-hmugo-web.itheima.net/api/public/v1/goods/detail?goods_id=";
        },
        getData(){
            function unique(arr) {
                if (!Array.isArray(arr)) {
                    console.log('type error!')
                    return
                }
                return Array.prototype.filter.call(arr, function(item, index){
                    return arr.indexOf(item) === index;
                });
            }
            this.$store.commit("isfootprintFun",unique(this.$store.getters.getData.footprint))

            let footprint = this.$store.getters.getData.footprint 
            for(let i = 0; i<footprint.length; i++){
                axios.get(this.api() + footprint[i]).then(data=>{
                    let {goods_id,goods_price,goods_small_logo} = data.data.message;
                    let goods = {
                        goods_id,
                        goods_price,
                        goods_small_logo
                    }
                    this.footprintList.push(goods)
                })
            }
            console.log(this.footprintList)
        },
        goDetail(id){
            this.$router.push({name:'Details',query: {goods_id:id}})
        },
        
        // 弹出层
        showPopup() {
          this.show = !this.show;
          this.delBtn = !this.delBtn
        },
        // 删除单个
        delSingle(index){
            this.$store.commit("delFootprintFun",index)
            this.footprintList.splice(index,1)
        },
        // 清空足迹
        allDel(){
            this.$store.commit("isfootprintFun",[])
            this.footprintList = this.$store.getters.getData.footprint
        },
    },
    created(){
        this.getData()
    }
}
</script>

<style lang="less" scoped>
    .default{
        text-align: center;
        margin-top: 100px;
    }

    .btn{
        .allDel{
            display: block;
            text-align: center;
            height: 80px;
            line-height: 80px;
            color: #FF5777;
        }
    }

    .list{
        ul{
            li{
                float: left;
                width: 23%;
                margin: 10px 0px 10px 10px;
                position: relative;
                img{
                    width: 100%;
                    height: 100%;
                }
                .price{
                    font-weight: 600;
                    color: #333;
                    font-size: 18px;
                }
                .del{
                    position: absolute;
                    top: 0px;
                    right: 10px;
                    color: #fff;
                }
            }
        }
    }
    .title_box {
      height: 60px;
      line-height: 60px;
      padding: 7px 0px;
      text-align: center;
      background: #fff;
      border-bottom: 1px solid #E8E8E8;
      display: flex;
      justify-content: space-around;
      div:nth-child(odd){
          flex: 1;
          font-size: 18px;
      }
      .title {
        flex: 6;
        font-size: 20px;
      }
    }
</style>